<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>设备管理 巡视与运行记录 -frame</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style>
        body {
            background-color: #foo;
            height: auto;
        }

        [v-cloak] {
            display: none;
        }

        .equipment-wrapper {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
        }

        .equipment-wrapper>div:nth-child(1) {
            width: 0%;
        }

        .equipment-wrapper>div:nth-child(2) {
            width: 100%;
            border-radius: 10px;
            overflow: hidden;
        }

        .aui-list-item-label>input,
        .aui-list-item-label>span {
            margin-left: 5px;
        }

        .multi-col-3-wrapper {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            padding: 10px 0;
        }

        .multi-col-3-wrapper>div:nth-child(1) {
            width: 20%;
            position: relative;
        }

        .multi-col-3-wrapper>div:nth-child(1)>span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            display: block;
            width: 50px;
        }

        .multi-col-3-wrapper>div:nth-child(2) {
            width: 45%;
        }

        .multi-col-3-wrapper>div:nth-child(2)>p:nth-child(1) {
            height: 40px;
            line-height: 40px;
        }

        .multi-col-3-wrapper>div:nth-child(2)>p:nth-child(2) {
            height: 40px;
            line-height: 40px;
        }

        .multi-col-3-wrapper>div:nth-child(2)>p:nth-child(3) {
            height: 20px;
            line-height: 20px;
        }

        .multi-col-3-wrapper>div:nth-child(3) {
            width: 30%;
        }

        .multi-col-3-wrapper>div:nth-child(3)>p {
            height: 20px;
            line-height: 20px;
        }

        .multi-col-3-wrapper>div:nth-child(4) {
            width: 20%;
        }

        .multi-col-3-wrapper>div:nth-child(4)>p {
            height: 20px;
            line-height: 20px;
        }

        .equipment-desc-wrapper {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            padding: 10px 0;
        }

        .equipment-desc-wrapper>div:nth-child(1) {
            width: 20%;
            position: relative;
        }

        .equipment-desc-wrapper>div:nth-child(1)>span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .equipment-desc-wrapper>div:nth-child(2) {
            width: 80%;
            color: #888;
        }

        .aui-border-t:before,
        .aui-border-t::after,
        .aui-list:before,
        .aui-list:after {
            display: none;
        }

        #app {
            width: 95%;
            margin: 0 auto;
        }

        .aui-list .aui-list-item-label,
        .aui-list .aui-list-item-label-icon {
            width: 20%;
        }

        .main-wrapper {
            width: 100%;
        }

        .main-wrapper>.top-header {
            text-align: center;
        }

        .main-wrapper>.top-nav,
        .top-middle {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
        }

        .main-wrapper>.top-nav>div {
            width: 33%;
            text-align: center;
            font-size: 16px;
        }

        .main-wrapper>.top-middle>div {
            width: 20%;
            font-size: 14px;
            text-align: center;
        }

        .main-wrapper>.top-content {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
        }

        .main-wrapper>.top-content>div {
            width: 20%;
            font-size: 14px;
            text-align: center;
        }

        .main-wrapper>div {
            height: 30px;
            line-height: 30px;
            margin: 10px auto;
        }

        .textarea-container {
            width: 100%;
            margin: 0 auto;
        }

        .textarea-container>div:nth-child(1) {
            text-align: center;
            font-size: 17px;
        }

        .textarea-container>div:nth-child(2) {
            padding: 10px;
        }

        .aui-list-header {
            padding: 5px 0;
            text-align: center;
        }
    </style>
</head>

<body>
    <main id="app">
        <div class="equipment-wrapper" v-for="(item, index) in InspectionData">
            <div>时间轴</div>
            <div class="aui-card-list" @click="changeClickStatus(item, index)" tapmode :style="{ height: item.F_Id }">
                <div class="aui-card-list-content-padded aui-border-b aui-border-t">
                    <div class="aui-row aui-row-padded">
                        <li class="aui-list-header">日期:<span>{{item.F_InsTime|dateFormat('YYYY-MM-DD')}} </span></li>
                        <div class="aui-col-xs-4">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    次数<span>{{item.F_InsFre}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-col-xs-4">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    供气压力
                                    <span v-if="item.F_SupplyPre == '1'">✔</span>
                                    <span v-if="item.F_SupplyPre == '0'">✖</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-col-xs-4">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    供氧压力
                                    <span v-if="item.F_OxygenPre == '1'">✔</span>
                                    <span v-if="item.F_OxygenPre == '0'">✖</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-col-xs-4">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    电气系统
                                    <span v-if="item.F_EleSys == '1'">✔</span>
                                    <span v-if="item.F_EleSys == '0'">✖</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-col-xs-4">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    加减压系统
                                    <span v-if="item.F_PlusRedeSys == '1'">✔</span>
                                    <span v-if="item.F_PlusRedeSys == '0'">✖</span>
                                </div>
                            </div>
                        </div>
                        <div class="aui-col-xs-4">
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-label">
                                    供排氧系统
                                    <span v-if="item.F_ForRowSys == '1'">✔</span>
                                    <span v-if="item.F_ForRowSys == '0'">✖</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-wrapper">
                    <div class="top-header">
                        空气压缩机
                    </div>
                    <div class="top-nav">
                        <div>开机</div>
                        <div>关机</div>
                        <div>运行时间累计</div>
                    </div>
                    <div class="top-middle">
                        <div>温度</div>
                        <div>压力</div>
                        <div>温度</div>
                        <div>压力</div>
                        <div>运行时间累计</div>
                    </div>
                    <div class="top-content">
                        <div>{{item.F_StartTem}}°C</div>
                        <div>{{item.F_StartPre}}</div>
                        <div>{{item.F_ShuTem}}°C</div>
                        <div>{{item.F_ShuPre}}</div>
                        <div>{{item.F_CumuTime}}</div>
                    </div>
                </div>
                <div class="textarea-container">
                    <div>故障及维修情况</div>
                    <div>
                        {{item.F_RepSit}}
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>

</html>

<script src="../script/api.js" charset="utf-8"></script>
<script src="../script/vue.js" charset="utf-8"></script>
<script src="../js/ToConfigure.js" charset="utf-8"></script>
<script src="../script/aui-toast.js" charset="utf-8"></script>
<script type="text/javascript">
    //调用vue中的过滤器，固定第一个参数为传入的要处理的数据data
    //Vue.filter('过滤器的名称',function(data){});
    //进行时间的格式化
    Vue.filter('dateFormat', function(dateStr, time) {
        //得到特定的时间
        var date = new Date(dateStr);
        var year = date.getFullYear();
        //ES6语法填充：var month = (date.getMonth()+1).toString().padStart(2, '0');
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        var hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
        var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
        var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();

        //return `${year}-${month}-${day}`;

        if (time && time.toLowerCase() === 'yyyy-mm-dd') {
            return `${year}-${month}-${day}`;
        } else if (time && time.toLowerCase() === 'hh:mm:ss') {
            return `${hh}:${mm}:${ss}`;
        } else {
            return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
        }
    });
    var vm = null;
    apiready = function() {
        api.addEventListener({
            name: 'On_Site_Inspection'
        }, function(ret, err) {
            if (ret.value.state == 'no') {
                reloadPatient();
            }
        });
        vm = new Vue({
            el: '#app',
            data: {
                showAll: false,
                InspectionData: [], //巡检数据
                Url_IP: ""
            },
            created() {
                //获取所属医院IP地址
                this.Url_IP = ToConfigure_IP("Gorgeous");

                api.ajax({
                    url: this.Url_IP + 'EquipmentInspect/HO_InspectRecord/Select_InspectRecord?parms=',
                    method: 'post',
                    date: {
                        parms: ""
                    },
                }, function(ret, err) {
                    if (ret) {
                        vm.InspectionData = ret;
                        for (var variable in vm.InspectionData) {
                            vm.InspectionData[variable]['F_Id'] = '120px';
                        }
                    } else {
                        var toast = new auiToast();
                        toast.fail({
                            title: "暂无信息",
                            duration: 2000
                        });
                    }
                });
            },
            methods: {
                changeClickStatus: function(item, index) {
                    for (var i = 0; i < vm.InspectionData.length; i++) {
                        if (index === i) {
                            if (vm.InspectionData[i].F_Id === 'auto') {
                                vm.InspectionData[i].F_Id = '120px';
                            } else {
                                vm.InspectionData[i].F_Id = 'auto';
                            }
                        } else {
                            vm.InspectionData[i]['F_Id'] = '120px';
                        }
                    }
                }
            }
        })
    }

    function reloadPatient() {
        window.location.reload();
    }
</script>
